<template>
  <a-modal v-model:visible="visible" title="开票列表" @cancel="handleCancel" width="1200px" :footer="null">
    <a-table :columns="columnsArr" :data-source="renderData" :pagination="false" size="small">
      <!-- :scroll="{ y: 540,x:'auto' }" -->
      <template #withdrawalsStatus="{ record }">
        <a-tag v-if="record.withdrawalsStatus" :color="statusColorObj[record.withdrawalsStatus].color">{{
          statusColorObj[record.withdrawalsStatus].text
        }}</a-tag>
      </template>

      <template #status="{ record }">
        <div>{{ orderStatus[record.status] }}</div>
      </template>
      <!-- <template #operation>
        <a-space>
          <a @click="edit">编辑</a>
        </a-space>
      </template> -->
    </a-table>

    <!-- <div class="footer-btns" v-if="form.status === 1">
      <a-button type="primary" danger @click="showRejectModal">拒绝</a-button>
      <a-button type="primary" @click="handleInvoice">开票</a-button>
    </div>

    <a-modal v-model:visible="rejectVisible" title="拒绝原因" @ok="handleReject" okText="确认" cancelText="取消">
      <a-form :model="rejectForm" :rules="rules">
        <a-form-item name="reason">
          <a-textarea v-model:value="rejectForm.reason" placeholder="请输入拒绝原因" :rows="4" />
        </a-form-item>
      </a-form>
    </a-modal> -->
    <inputModal @ok="handleOk" ref="inputModalRef" type="input" label="金额" title="修改价格" :number="number"></inputModal>
  </a-modal>
</template>

<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { columnsArr, statusColorObj, orderStatus } from '../list/data'
import { selectOrganOrderByDto, selectPlaceOrganList, selectOrganIdList } from '@/api/content/translate'
import { useTable } from '@/hooks'
import inputModal from '@/components/common/inputModal.vue'

import { selectInvoiceOrderList } from '@/api/buisness/index'

const number = ref(null)
const visible = ref(false)
const form = ref({
  status: 1
})
const inputModalRef = ref()

const getParams = () => ({
  pageSize: 9999
})

const { info, renderData, formModel, loading, pagination, handleSearch, handleTableChange } = useTable({
  api: selectInvoiceOrderList,
  getParams
})

const rejectVisible = ref(false)
const rejectForm = ref({
  reason: ''
})

const rules = {
  reason: [{ required: true, message: '请输入拒绝原因' }]
}

const emit = defineEmits(['close', 'ok'])

const handleCancel = () => {
  emit('close')

  visible.value = false
}
const edit = () => {
  inputModalRef.value.showModal()
}
const showModal = data => {
  formModel.value.id = data
  // TODO: 加载订单列表数据
  handleSearch(1)
  visible.value = true
}

const showRejectModal = () => {
  rejectVisible.value = true
}

const handleReject = () => {
  if (!rejectForm.value.reason) {
    message.error('请输入拒绝原因')
    return
  }
  // TODO: 实现拒绝功能
  message.success('已拒绝')
  rejectVisible.value = false
  visible.value = false
}

const handleInvoice = () => {
  // TODO: 实现开票功能
  message.success('开票成功')
  visible.value = false
}

defineExpose({
  showModal
})
</script>

<style scoped>
.footer-btns {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 16px;
}
</style>
